<html>

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>获取验证码</title>
</head>

<body>
  <p><input id="tel" type="tel" placeholder="请输入手机号"></p>
  <p>
    <input type="text" placeholder="验证码" style="width: 90px;">
    <input type="button" id="btn" value="获取验证码" onclick="checkTel()" />

  </p>
  <script type="text/javascript">
    var time = 60;

    //电话验证
    function checkTel() {
      var userTel = document.getElementById('tel');
      var pattern = /^1\d{10}$/;
      if (userTel.value.length == 0) {
        alert('电话不能为空');
        return false;
      }
      if (!pattern.test(userTel.value)) {
        alert('电话不符合规范')
        userTel.value = '';
        return false;
      }
      settime()
    }


    // 获取验证码  倒计时
    function settime() {
      var val = document.getElementById('btn')
      var sum = Math.random().toString().slice(2, 8);
      console.log(sum);
      fn(val)
      function fn() {
        if (time == 0) {
          val.setAttribute('disabled');
          val.value = "获取验证码";
          time = 60;
        } else {
          val.setAttribute("disabled", true);
          val.value = "重新发送(" + time + ")";
          time--;
        }
        setTimeout(function () {
          fn(val);
        }, 1000)
      }
    }





  </script>
</body>

</html>